<template>
  <div>
    <!-- <headerNavigation :jump="1"></headerNavigation> -->
    <labelNavigation :Xuexidata="semesterName"></labelNavigation>

    <button class="return" @click="back()">
      <i class="el-icon-arrow-left"></i>
      返回
    </button>

    <div class="ChildrenContainer">
      <button
        class="navigation-ecah"
        :class="{ show: echaIndex == index }"
        v-for="(item, index) in myselfmessage"
        :key="index"
        @click="setIndex(item, index)"
      >
        {{ item.stuName }}
      </button>
    </div>
    <div class="Countainer">
      <div class="Countainer-item" @click="mind">
        <img src="../../assets/images/myselfPhoto.png" width="45px" height="38px" />
        <span class="name">这就是我</span>
        <span class="english">THIS IS ME</span>
        <i class="iconfont icon-zhengque"></i>
      </div>
      <div class="Countainer-item" @click="myfirend">
        <img src="../../assets/images/myFirendPhoto.png" width="40px" height="46px" />
        <span class="name">我和我的伙伴</span>
        <span class="english">MY PARTNER AND I </span>
      </div>
      <div class="Countainer-item" @click="myword">
        <img src="../../assets/images/wordPhoto.png" width="40px" height="40px" />
        <span class="name">我写的字</span>
        <span class="english">THE WORDS I WRITE </span>
      </div>
      <div class="Countainer-item" @click="myhomework">
        <img src="../../assets/images/homeworkPhoto.png" width="38px" height="40px" />
        <span class="name">我的作业</span>
        <span class="english">MYHOMEWORK </span>
        <i class="iconfont icon-zhengque"></i>
      </div>
      <div class="Countainer-item" @click="myscore">
        <img src="../../assets/images/scorePhoto.png" width="38px" height="40px" />
        <span class="name">我的试卷</span>
        <span class="english">MY PAPER</span>
      </div>
      <div class="Countainer-item" @click="mytheme">
        <img src="../../assets/images/themePhoto.png" width="40px" height="41px" />
        <span class="name">我的作文</span>
        <span class="english">MY COMPOSITION</span>
      </div>
      <div class="Countainer-item" @click="myactive">
        <img src="../../assets/images/actionPhoto.png" width="45px" height="38px" />
        <span class="name">我参加的活动</span>
        <span class="english">ACTIVITIES IPARTICIPATED IN</span>
        <i class="iconfont icon-zhengque"></i>
      </div>
      <div class="Countainer-item" @click="report">
        <img src="../../assets/images/ShuYang.png" width="34px" height="38px" />
        <span class="name">学业素养报告单</span>
        <span class="english">SCHOOL REPORT</span>
      </div>
      <div class="Countainer-item"  @click="teacherword">
        <img src="../../assets/images/JiYu.png" width="38px" height="40px"/>
        <span class="name">老师寄语</span>
        <span class="english" @click="awaitword">TEACHER' SMESSAGE</span>
      </div>
      <div class="Countainer-item" @click="friendsword">
        <img src="../../assets/images/myFirendPhoto.png" width="40px" height="43px" />
        <span class="name">小伙伴的话</span>
        <span class="english">FROM A FPIEND</span>
      </div>
      <div class="Countainer-item" @click="myhonour">
        <img
          src="../../assets/images/HonourPhoto.png"
          width="38px"
          height="40px"
        />
        <span class="name">我的荣誉</span>
        <span class="english">MY HONER</span>
      </div>
      <div class="Countainer-item" @click="semestersum">
        <img src="../../assets/images/sumPhoto.png" width="36px" height="35px" />
        <span class="name">我的学期小结</span>
        <span class="english">MY TERMSUMMARY</span>
      </div>
      <div class="Countainer-item" @click="mygrow">
        <img src="../../assets/images/growPhoto.png" width="36px" height="35px" />
        <span class="name">我的十能成长目录</span>
        <span class="english">MY LIST OFTEN TALENTS</span>
      </div>

    </div>
    <!-- <footerNavigation></footerNavigation> -->
  </div>
</template>

<script>
// import headerNavigation from "../components/background/headerNavigation";
import labelNavigation from "../components/background/labelNavigation";
// import footerNavigation from "../components/background/footerNavigation";
import { childrenmessageAPI, studentlistAPI } from "@/api/make/make";

export default {
  data() {
    return {
      echaIndex1: 0,
      echaIndex: 0,
      myselfmessage: [],
      myselfmessageitem: [],
      stuId: "",
      growthId: "",
      showModal: false,
      semesterName:""
    };
  },
  mounted(){
    window.onbeforeunload = function (e) { 
    var storage = window.localStorage; 
    storage.clear() 
    }
  },
  created() {
    let semesterName=this.$route.query.semesterName
    if(semesterName!=undefined){
    sessionStorage.setItem("semesterName",this.$route.query.semesterName)
    this.semesterName=sessionStorage.getItem("semesterName")
    }
    else{
    this.semesterName=sessionStorage.getItem("semesterName")
    }
    this.makeinfofn();
  },
  components: {
    // headerNavigation,
    labelNavigation,
    // footerNavigation,
  },
  methods: {
    back() {
       this.$router.go(-1);
    },
    async setIndex(item, index) {
      this.stuId = item.stuId;
      console.log(this.stuId);
      this.echaIndex = index;
      const res2 = await studentlistAPI({ stuId: this.stuId });
      res.data.map((item) => {
        this.myselfmessage.push(item);
      });
      res2.data.map((item2) => {
        this.growthId = item2.growthId;
      });
      this.getData();
    },
    getData() {
      this.myselfmessage.forEach((item) => {
        this.myselfmessageitem = item;
      });
    },
    mind() {
      this.$router.push({
        name: "myself",
        params: { stuId: this.stuId, growthId: this.growthId,semesterName:this.semesterName },
      });
    },
    myfirend() {
      this.$router.push({
        name: "myfirend",
        params: { stuId: this.stuId, growthId: this.growthId },
      });
    },
    myword() {
      this.$router.push({
        name: "myword",
        params: { stuId: this.stuId, growthId: this.growthId },
      });
    },
    myhomework() {
      this.$router.push({
        name: "myhomework",
        params: { stuId: this.stuId, growthId: this.growthId },
      });
    },
    myscore() {
      this.$router.push({
        name: "myscore",
        params: { stuId: this.stuId, growthId: this.growthId },
      });
    },
    mytheme() {
      this.$router.push({
        name: "mytheme",
        params: { stuId: this.stuId, growthId: this.growthId },
      });
    },
    myactive() {
      this.$router.push({
        name: "myactive",
        params: { stuId: this.stuId, growthId: this.growthId },
      });
    },
    attainment() {
      this.$router.push("/attainment");
    },
    report() {
      this.$router.push({
        name: "report",
        params: { stuId: this.stuId, growthId: this.growthId },
      });
    },
    teacherword() {
      this.$router.push({ name: "teacherword", params: { stuId: this.stuId, growthId: this.growthId } });
    },
    awaitword() {
      this.$router.push({
        name: "awaitword",
        params: { stuId: this.stuId, growthId: this.growthId },
      });
    },
    friendsword() {
      this.$router.push({name: "friendsword",params: { stuId: this.stuId, growthId: this.growthId },});
    },
    honourempty() {
      this.$router.push("/honourempty");
    },
    myhonour() {
      this.$router.push({name: "myhonour",params: { stuId: this.stuId, growthId: this.growthId },});
    },
    semestersum() {
      this.$router.push({
        name: "semestersum",
        params: { stuId: this.stuId, growthId: this.growthId },
      });
    },
    mygrow() {
      this.$router.push({
        name: "mygrow",
        params: { stuId: this.stuId, growthId: this.growthId },
      });
    },
    personality() {
      this.$router.push("personality");
    },
    async makeinfofn() {
      const res = await childrenmessageAPI();
      this.stuId = res.data[0].stuId;
      localStorage.setItem("person",JSON.stringify(this.stuId))
      const res2 = await studentlistAPI({ stuId: this.stuId });
      res.data.map((item) => {
        this.myselfmessage.push(item);
      });
      res2.data.map((item2) => {
        this.growthId = item2.growthId;
      });
      this.getData();
    },
    getData() {
      this.myselfmessage.forEach((item) => {
        this.myselfmessageitem = item;
      });
    },
  },
};
</script>

<style scoped>
.ChildrenContainer {
  margin-left: 12.5rem;
}
.Countainer {
  width: 69.5rem;
  height: 29.75rem;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: 4.0625rem;
  margin-bottom: 18.75rem;
}
.Countainer-item {
  width: 6.3125rem;
  height: 8.75rem;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0rem 0rem .4375rem 0rem rgba(153, 153, 153, 40);
  border-radius: .5rem;
  align-items: center;
  margin-right: 7.5rem;
  margin-top: 1.75rem;
  text-align: center;
  position: relative;
}
/* 图片下面的字 */
.Countainer-item .name {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: .625rem;
  justify-content: center;
  color: rgba(16, 16, 16, 1);
}
.Countainer-item .english {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: .225rem;
  justify-content: center;
  color: rgba(153, 153, 153, 1);
}
/* 图片 */
.Countainer-item img {
  margin: 0 auto;
}
.icon-zhengque {
  position: absolute;
  top: .125rem;
  right: .1875rem;
  font-size: 1rem;
  font-weight: bold;
  color: rgba(124, 0, 0, 100);
}
/* 弹框 */
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.pop {
  background-color: #fff;
  position: fixed;
  top: 6.25rem;
  left: 18.75rem;
  width: 34.0625rem;
  height: 29.6875rem;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: .625rem;
}
.headerMask {
  line-height: 3.125rem;
  text-align: center;
}
.blockname {
  display: flex;
  height: 3.75rem;
  align-items: center;
  border: .0625rem solid rgba(245, 245, 245, 1);
}
.titlename {
  margin-left: 3.75rem;
}
.writename {
  height: 2.5rem;
  width: 16.25rem;
  margin-left: 1.25rem;
  font-size: .9375rem;
  color: darkgrey;
}
.uploadimage {
  display: flex;
  margin-top: 1.25rem;
}
.image {
  height: 12.5rem;
  width: 12.5rem;
  border: .0625rem solid rgba(124, 0, 0, 1);
  border-style: dashed;
  margin-left: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.titleimage {
  margin-left: 3.75rem;
}
.add {
  font-size: 6.25rem;
  color: rgba(124, 0, 0, 1);
  margin: 0 auto;
}
.headertitle {
  display: flex;
  align-items: center;
  margin-top: 2.5rem;
  margin-left: 10rem;
  color: rgba(124, 0, 0, 1);
}
.el-icon-plus {
  font-size: 1.875rem;
  color: rgba(124, 0, 0, 1);
}
.confirm {
  background-color: rgba(124, 0, 0, 1);
  color: aliceblue;
  border: .0625rem solid rgba(187, 187, 187, 1);
  width: 6.25rem !important;
  height: 2.8125rem !important;
  border-radius: .5rem;
  font-size: .9375rem;
  margin-right: 1.25rem;
}
/* 头部导航区内容 */
.header {
  position: relative;
  height: 4.75rem;
  margin: 1.25rem 26.875rem 1.25rem 26.875rem;
}
.header-logo {
  width: 5rem;
  height: 3.75rem;
  position: absolute;
}

/* 导航区 */
.header-navigation {
  position: absolute;
  right: 0;
}

/* 标签导航区 */
.navigation-ecah {
  font-size: 1.25rem;
  border: 0rem solid;
  margin: 1.875rem 0rem 0 1.5625rem;
  background: #ffffff;
}

.show {
  color: #7c0000;
  padding-bottom: .3125rem;
  border-bottom: .1875rem solid #7c0000;
}

.return {
  font-size: 1.125rem;
  text-align: center;
  position: relative;
  left: 13.75rem;
  border: 0rem;
  background: #fff;
}
</style>